<template>
  <view class="page bg-white">
    <view class="main">
      <!-- 上课时间 -->
      <view class="margin-top">
        <u-text margin="0 10rpx" color="#333" size="32rpx" text="上课时间" bold></u-text>
        <view class="form-item" @click="showClassTimePopup = true">
          <u-text :text="formData.classTime || '请选择上课时间'" size="32rpx"
            :color="formData.classInfo ? '#333' : '#999'"></u-text>
          <u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
        </view>
      </view>

      <!-- 开始和结束日期  -->
      <view class="margin-top">
        <u-text margin="0 10rpx" color="#333" size="32rpx" text="开始和结束日期" bold></u-text>
        <view class="flex gap">
          <view class="form-item flex-1" @click="showStartDate = true">
            <u-text :text="formData.startDate ? dayjs(formData.startDate).format('YYYY-MM-DD') : '请选择开始日期'" size="32rpx"
              :color="formData.startDate ? '#333' : '#999'"></u-text>
            <u-icon name="calendar" size="36rpx" color="#999"></u-icon>
          </view>
          <view class="form-item flex-1" @click="showEndDate = true">
            <u-text :text="formData.endDate ? dayjs(formData.endDate).format('YYYY-MM-DD') : '请选择结束日期'" size="32rpx"
              :color="formData.endDate ? '#333' : '#999'"></u-text>
            <u-icon name="calendar" size="36rpx" color="#999"></u-icon>
          </view>
        </view>
      </view>

      <!-- 上课时间  -->
      <up-picker :closeOnClickOverlay="true" :show="showClassTimePopup" :columns="classTimeList"
        @close="showClassTimePopup = false" @confirm="handleClassTimeConfirm"></up-picker>

      <!-- 开始时间选择器 -->
      <up-datetime-picker :closeOnClickOverlay="true" :show="showStartDate" mode="date" format="YYYY-MM-DD"
        @cancel="showStartDate = false" @confirm="handleStartDateConfirm"></up-datetime-picker>
      <!-- 结束时间选择器 -->
      <up-datetime-picker :closeOnClickOverlay="true" :show="showEndDate" mode="date" format="YYYY-MM-DD"
        @cancel="showEndDate = false" @confirm="handleEndDateConfirm"></up-datetime-picker>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';
import dayjs from 'dayjs';
const { themePrimary, themeSecondary, themeTertiary } = useTheme();

// 班级性质弹窗
const showClassTypePopup = ref(false)
// 班主任弹窗
const showTeacherPopup = ref(false)
// 年级弹窗
const showGradePopup = ref(false)
// 教室弹窗
const showClassroomPopup = ref(false)
// 上课时间弹窗
const showClassTimePopup = ref(false)
// 开始和结束日期弹窗
const showStartDate = ref(false)
const showEndDate = ref(false)

const formData = ref({
  startDate: '',
  endDate: '',
  classType: null,
  teacher: null,
  grade: null,
  classroom: null,
  classTime: null,
  studentInfo: null,
  birthday: '',
  guardians: [],
  recentScoreType: null, //近期成绩录入类型
  chineseScore: '',
  mathScore: '',
  englishScore: ''
})

// 班级性质列表
const classTypeList = ref([['托班(工作日)', '周末班']])

const teacherList = ref([['张三', '李四']])

const gradeList = ref([['一年级', '二年级']])

const classroomList = ref([['教室1', '教室2']])

const classTimeList = ref([['工作日', '周末']])

// 班级性质选择器确认
const handleClassTypeConfirm = (e) => {
  console.log(e)
  showClassTypePopup.value = false
  formData.value.classType = e.value[0]
}

// 班主任选择器确认
const handleTeacherConfirm = (e) => {
  console.log(e)
  showTeacherPopup.value = false
  formData.value.teacher = e.value[0]
}

// 年级选择器确认
const handleGradeConfirm = (e) => {
  console.log(e)
  showGradePopup.value = false
  formData.value.grade = e.value[0]
}

// 教室选择器确认
const handleClassroomConfirm = (e) => {
  console.log(e)
  showClassroomPopup.value = false
  formData.value.classroom = e.value[0]
}

const handleClassTimeConfirm = (e) => {
  console.log(e)
  showClassTimePopup.value = false
  formData.value.classTime = e.value[0]
}
// 开始日期选择器确认
const handleStartDateConfirm = (e) => {
  console.log(e)
  showStartDate.value = false
  formData.value.startDate = e.value
}

// 结束日期选择器确认
const handleEndDateConfirm = (e) => {
  console.log(e)
  showEndDate.value = false
  formData.value.endDate = e.value
}

</script>
<style scoped lang="scss">
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F7F7F7;
  padding: 30rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
}

.camera-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 54rpx;
  height: 54rpx;
}
</style>